<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>用户角色管理</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<script>
layui.use(['table','form'], function(){
	  var table = layui.table;
	  var form = layui.form;
//执行一个 table 实例
	table.render({
	  elem: '#test'
	  ,height: 'full-80'
	  ,url: 'list' //数据接口
	  ,even:true
	  ,title: '角色表'
	  ,cellMinWidth:100 
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
		{type: 'checkbox', fixed: 'left'}
	    ,{field: 'rid', title: '角色ID', sort: true, fixed: 'left'}
	    ,{field: 'name', title: '角色名称'}
	    ,{field: 'permission', title: '角色权限'}
	    ,{field: 'parentId', title: '角色父级节点Id'}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	  ]
		]
	});
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'getCheckData':
	        var data = checkStatus.data;
	        layer.alert(JSON.stringify(data));
	      break;
	      case 'add':
	        var data = checkStatus.data;
	        layer.open({
	        	type:1,
				title:'添加角色',
				area:'800px',
				anim: 1,
				skin: 'layui-layer-molv',
				content:layui.$('#add'),	
	        })
	      break;
	    };
	  });
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'del'){
	    	layer.confirm('是否删除数据',{icon:3,title:"确认"}, function(index){
	      	  	layui.$.ajax({
	                url:"delete",
	                type:"POST",
	                data:{"rid":data.rid,"nid":data.nid},
	                dataType: "json",                
	                success: function(data){
	                	if(data==null){
	                		layer.msg("删除失败", {icon: 5});    
	                	}else{
	                		layer.msg(data.osgid);
	                		obj.del();//删除这一行
	                        layer.close(index);//关闭弹框
	                        layer.msg("删除成功", {icon: 6}); 
	                	}
	                },
	                error:function(){
	              	  layer.closeAll();
	                    parent.location.reload();;//调用父级的layer来关闭弹窗
	                    Load(); //删除完需要加载数据
	                },
	      	  	});
	    	});
	    } else if(obj.event === 'edit'){
			form.val("formTest",data);
			layer.open({
				type:1,
				title:'修改用户',
				area:'800px',
				anim: 1,
				skin: 'layui-layer-molv',
				content:layui.$('#update'),	
			});
	    }
	  });
});
</script>

<form id="add" class="layui-form layui-form-pane" action="add" lay-filter="" hidden="true" method="post" style="height:400px">
	<div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>   
	<div class="layui-form-item">
    <label class="layui-form-label">用户权限</label>
    <div class="layui-input-block">
      <select name="permission" lay-filter="aihao">
      	<option value="">请选择</option>
        <option value="1">普通用户</option>
        <option value="2">党支部管理员</option>
        <option value="3">党总支管理员</option>
        <option value="4">党委管理员</option>
        <option value="5">党工委管理员</option>
        <option value="6">系统管理员</option>
      </select>
    </div>
  </div>
	<div class="layui-form-item">
    <label class="layui-form-label">所属父级节点Id</label>
	    <div class="layui-input-block">
	      <input type="text" name="parentId" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>   
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<form id="update" class="layui-form layui-form-pane" action="update" lay-filter="formTest" method="post" hidden="true" style="height:400px">
 	
	<input type="hidden" name="cid" style="hidden:true" lay-verify="title" autocomplete="off" class="layui-input">
 	<div class="layui-form-item">
 	<label class="layui-form-label">角色id</label>
	    <div class="layui-input-block">
	      <input type="text" name="rid" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	</div>
	 <div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>
	 <div class="layui-form-item">
    <label class="layui-form-label">角色权限</label>
	    <div class="layui-input-block">
	      <input type="text" name="permission" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>    
	<div class="layui-form-item">
    <label class="layui-form-label">所属父级节点Id</label>
	    <div class="layui-input-block">
	      <input type="text" name="parentId" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
	 </div>   
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
</html>